<template>
  <n-message-provider>
    <n-layout has-sider style="height: 100vh; width: 100vw;">
      <n-layout-sider
          collapse-mode="width"
          :collapsed-width="0"
          :width="220"
          show-trigger="bar"
          bordered
          class="nav-sider"
      >
        <div class="logo-container">
          <n-icon size="24" color="#1890ff">
            <HomeOutline />
          </n-icon>
          <h2>医疗废物转运<br>管理系统</h2>
        </div>
        <n-scrollbar>
          <n-menu
              :options="menuOptions"
              :render-label="renderMenuLabel"
              :value="activeKey"
              @update:value="handleMenuUpdate"
              default-expand-all
              :indent="18"
              class="nav-menu"
              :render-icon="renderIcon"
          />
        </n-scrollbar>
      </n-layout-sider>
      <n-layout-content class="main-content">
        <div class="header-bar">
          <div class="breadcrumb">
            {{ getCurrentMenuLabel() }}
          </div>
        </div>
        <div class="content-container">
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
      </n-layout-content>
    </n-layout>
  </n-message-provider>
</template>

<script>
import { h, ref, watch } from "vue"
import { RouterLink, useRoute, useRouter } from "vue-router"
import { NIcon } from 'naive-ui'
import { 
  HomeOutline, 
  MapOutline, 
  LocationOutline, 
  ImageOutline, 
  ListOutline 
} from '@vicons/ionicons5'

export default {
  name: "app",
  setup() {
    const route = useRoute()
    const router = useRouter()
    const activeKey = ref(route.path)

    watch(
      () => route.path,
      (newPath) => {
        activeKey.value = newPath
      }
    )

    const menuOptions = [
      {
        label: "首页",
        path: "/home",
        key: "/home",
        icon: HomeOutline
      },
      {
        label: "地图",
        path: "/map",
        key: "/map",
        icon: MapOutline
      },
      {
        label: "位置",
        path: "/location",
        key: "/location",
        icon: LocationOutline
      },
      {
        label: "图片",
        path: "/image",
        key: "/image",
        icon: ImageOutline
      },
      {
        label: "分类",
        path: "/easydl",
        key: "/easydl",
        icon: ListOutline
      },
      {
        label: "路径管理",
        path: "/routes",
        key: "/routes",
        icon: MapOutline
      }
    ]

    const handleMenuUpdate = (key) => {
      router.push(key)
    }

    const getCurrentMenuLabel = () => {
      const currentPath = route.path
      const currentMenu = menuOptions.find(item => item.path === currentPath)
      return currentMenu ? currentMenu.label : ''
    }

    const renderIcon = (option) => {
      return h(NIcon, null, { default: () => h(option.icon) })
    }

    return {
      activeKey,
      menuOptions,
      handleMenuUpdate,
      renderMenuLabel(option) {
        return h(
          RouterLink,
          {
            to: option.path,
            style: {
              textDecoration: 'none',
              color: 'inherit',
              display: 'flex',
              alignItems: 'center'
            }
          },
          {
            default: () => option.label
          }
        )
      },
      getCurrentMenuLabel,
      renderIcon
    }
  }
}
</script>

<style scoped>
.nav-sider {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.logo-container {
  height: 64px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  border-bottom: 1px solid #f0f0f0;
}

.logo-container h2 {
  color: #1890ff;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.nav-menu {
  padding: 12px 0;
}

.main-content {
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.header-bar {
  height: 64px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 24px;
  display: flex;
  align-items: center;
}

.breadcrumb {
  font-size: 16px;
  font-weight: 500;
  color: #1890ff;
}

.content-container {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

:deep(.n-menu-item) {
  height: 50px;
  margin: 4px 12px;
  border-radius: 4px;
  color: #333;
}

:deep(.n-menu-item:hover) {
  background-color: #e6f7ff !important;
  color: #1890ff;
}

:deep(.n-menu-item.n-menu-item--selected) {
  background-color: #e6f7ff !important;
  color: #1890ff !important;
}

:deep(.n-layout-sider-scroll-container) {
  background-color: #fff;
}

:deep(.n-menu-item-content) {
  display: flex;
  align-items: center;
  gap: 12px;
}

:deep(.n-menu-item-content__icon) {
  font-size: 18px;
}

:deep(.n-menu-item-content .n-icon) {
  font-size: 18px;
}

:deep(.n-menu-item:hover .n-icon) {
  color: #1890ff;
}

:deep(.n-menu-item--selected .n-icon) {
  color: #1890ff;
}
</style>
